<!--
 * @Description: 攻略
 -->
<template>
  <div class="layout-min-full-height overflow-hidden special-content pb-8">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-xxl-10 offset-xxl-1">
          <header class="text-center py-8">
            <h1 class="fw-600 fs-29">
              值得去
              <span
                class="text-primary hover-text-underline cursor el-popover__reference">{{
                  productCategory.categoryName
                }}</span>
            </h1>
            <span>
              <span
                class="el-popover__reference-wrapper"></span></span>
            <h5 class="text-muted">
              在这里，您可以找到飞猫全部专题景点。<br>
              如果您认为我们有所遗漏，请在
              <a href="/feedback" class="mx-1 text-primary" target="_blank">意见建议</a>处提交给我们，谢谢。
            </h5>
          </header>

          <div class="clearfix special-box-list" style="margin-top: 20px">
            <div class="w-r" style="margin-left: -15px; margin-right: -15px;">
              <div class="list-animation-leftIn w-c w-c-6 delay-0" v-for="item in ztProductDetails" :key="item.pid"
                   style="padding-left: 15px; padding-right: 15px; padding-bottom: 30px;">
                <!--单个景点-->
                <router-link :to="{ path: '/product/details', query: { productID: item.pid } }"
                   class="macwk-app white border cursor-pointer mb-0 macwk-box__animation delay-0">
                  <span class="snow-dot"></span>
                  <span class="snow-dot"></span>
                  <span class="snow-dot"></span>
                  <span class="snow-dot"></span>
                  <span class="snow-dot"></span>
                  <span class="snow-dot"></span>
                  <span class="snow-dot"></span>
                  <div class="macwk-app__header--icon delay-0">
                    <div class="macwk-app__header--icon--content"></div>
                    <img class="delay-0" v-if="item.imgUrl"
                         style="border-radius:8px;"
                         data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/todesk.png"
                         :src=item.imgUrl[0] lazy="loaded">
                    <img class="delay-0" v-else
                         data-src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/todesk.png"
                         src="https://coding-init-1254329140.cos.ap-beijing.myqcloud.com/todesk.png" lazy="loaded">
                    <div class="flex-grow-1 text-right fs-14"></div>
                  </div>
                  <div class="macwk-app__body pt-6 pb-7">
                    <h4 class="macwk-app__body--title"
                        style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                      <span class="fw-600">{{ item.productName }}</span>
                    </h4>
                    <p class="macwk-app__body--info"
                       style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 1;">
                      <span>推荐必去</span>
                    </p>
                    <p class="text-muted text-truncate mb-0">
                      {{ item.des }}
                    </p></div>
                  <div class="macwk-app__extend">
                    <div class="macwk-app__extend--download">
                      <i class="el-icon-s-data"></i>
                      <span v-if="item.views < 1000">{{ item.views }}</span>
                      <span v-else>{{ Math.round(item.views / 1000) }}k</span>
                    </div>
                    <div class="macwk-app__extend--comment">
                      <i class="el-icon-chat-round"></i>
                      <span>4</span>
                    </div>
                    <div class="macwk-app__extend--update">
                      <i class="el-icon-time"></i>
                      <span>{{ item.updateTime.slice(0, 10) }}</span>
                    </div>
                  </div>
                </router-link>
                <!--单个景点END-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ztPid: "", // 专题pid
      ztProductDetails: "", // 攻略详细信息
      productCategory: ''
    };
  },
  watch: {
    // 监听景点id的变化，请求后端获取景点数据
    ztPid: function (val) {
      console.log(
        "监听景点id的变化，请求后端获取景点数据 watch productID",
        val
      );
      this._getZtProductDetails_(val);
      this._getProductCateGory_(val);
    },
  },
  // 通过路由获取pid
  activated() {
    if (this.$route.query.ztPid != undefined) {
      this.ztPid = this.$route.query.ztPid;
      console.log(
        "专题",
        "this.productID:",
        this.ztPid,
        "this.$route.query.productID:",
        this.$route.query.ztPid
      );
    }
  },
  mounted() {

  },
  methods: {
    _getZtProductDetails_(ztPid) {
      this.$axios
        .post("/cat/productInfo/getAllProduct", {
          limit: 5,
          cateGoryPid: ztPid
        })
        .then((res) => {
          this.ztProductDetails = res.data.productPage.list;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    _getProductCateGory_(ztPid) {
      this.$axios
        .post("/cat/productCategory/info/" + ztPid)
        .then((res) => {
          this.productCategory = res.data.productCategory;
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
  },
};
</script>
<style scoped>
/*@import "../../assets/css/zt.css";*/
/*@import "https://static.konlonair.com/macwk-client/css/7343d4b.css";*/
</style>
